So I've spent the weekend figuring out how to properly embed Jupyter notebooks into my Jekyll site. Overall, I'm happy with my results. I managed to adjust the font-colors of the various CSS classess and embed my plots nicely in here. I also learned how to include my own images and embed audio into my Jupyter notebooks and have them play after the conversion to html. I have a simple workflow set up now that allows me to quickly take my Jupyter notebook and place it into my Jekyll blog.
The easiest way to do this is by simply downloading the .ipynb file as a .html file. Then, you can copy those contents after the header of the .html file of your post in your Jekyll site.
I did however try to (perhaps an instance of me trying to get too fancy too soon) embed interactive plots using plotly in my jekyll site. Unfortunately, that has proven to be quite challenging so far since the conversion from the .ipynb to html using nbconv seems to have an issue with the javascript associated with plotly. I've tried modifying the javascript but haven't been successful yet.
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
import seaborn as sns
import numpy as np
import pandas as pd
import random
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from plotly.graph_objs import Scatter, Figure, Layout
import plotly
import plotly.graph_objs as go
config={'showLink': False, 'displayModeBar': False}
init_notebook_mode(connected=False)
import json
from IPython.core.display import display, HTML
config={'showLink': False, 'displayModeBar': False}
import IPython
from IPython.display import display, HTML
#Hi!
print("Hello Jekyll from the Jupyter Notebook!! :]")
#Make random data to plat
xs = [random.gauss(0, 10) for _ in range(100)]
ys = [random.gauss(0, 10)for _ in range(100)]
zs = [random.gauss(0, 10) for _ in range(100)]
#Make a scatter plot from random data
sns.set(rc={'figure.figsize':(16.7,8.27)})
sns.set(font_scale = 2)
plt.scatter(xs, ys)
plt.xlabel("X")
plt.ylabel("Y")
plt.title("Random plot")
plt.show()
#Make histogram of generated data
sns.color_palette("mako", as_cmap=True)
sns.histplot(ys, bins = 20, discrete = True, kde = True, color = 'red', alpha=0.5)
sns.histplot(xs, bins = 20, discrete = True, kde = True, color = 'blue', alpha=0.5)
sns.set(rc={'figure.figsize':(16.7,8.27)})
sns.set(font_scale = 2)
plt.legend(labels=["Rand y","Rand x"])
#Make a 3D parametric curve
ax = plt.figure().add_subplot(projection='3d')
sns.set(rc={'figure.figsize':(8.7,8.27)})
# Prepare arrays x, y, z
theta = np.linspace(-4 * np.pi, 4 * np.pi, 100)
z = np.linspace(-2, 2, 100)
r = z**2 + 1
x = r * np.sin(theta)
y = r * np.cos(theta)
ax.plot(x, y, z, label='parametric curve')
ax.legend()
plt.show()
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv')
data = [go.Surface(z=df.values.tolist(), colorscale='Viridis')]
layout = go.Layout(
width=600,
height=500,
autosize=False,
scene=dict(
xaxis=dict(
gridcolor='rgb(255, 255, 255)',
zerolinecolor='rgb(255, 255, 255)',
showbackground=True,
backgroundcolor='rgb(230, 230,230)'
),
yaxis=dict(
gridcolor='rgb(255, 255, 255)',
zerolinecolor='rgb(255, 255, 255)',
showbackground=True,
backgroundcolor='rgb(230, 230, 230)'
),
zaxis=dict(
gridcolor='rgb(255, 255, 255)',
zerolinecolor='rgb(255, 255, 255)',
showbackground=True,
backgroundcolor='rgb(230, 230,230)'
),
aspectratio = dict(x=1, y=1, z=0.7),
aspectmode = 'manual'
)
)
updatemenus=list([
dict(
buttons=list([
dict(
args=['type', 'surface'],
label='3D Surface',
method='restyle'
),
dict(
args=['type', 'heatmap'],
label='Heatmap',
method='restyle'
)
]),
direction = 'down',
pad = {'r': 0, 't': 0},
showactive = True,
x = 1.25,
xanchor = 'left',
y = 1.1,
yanchor = 'top'
),
])
annotations = list([
dict(text='', x=0, y=1.085, yref='paper', align='left', showarrow=False)
])
layout['updatemenus'] = updatemenus
layout['annotations'] = annotations
fig = dict(data=data, layout=layout)
iplot(fig,show_link=False , config = config)
import plotly.io as pio
pio.write_html(fig, file='figure.html', auto_open=True)
Embedding an image via html into Jupyter Notebook in Jekyll
Here's a picture of my cat for you :]
Embedding an audio file into Jupyter Notebook in Jekyll
Below is a sameple of my guitar playing :]
#Loading an audio file into notebook
IPython.display.Audio("CrimsonCloverCover.mp3")